<!--
 * 不要写复杂的业务逻辑，因为被父组父循环重复调用
 *
 * @Author: Charsen
 * @Date: 2020-03-10
 -->
<template>
  <el-space class="list-col-options">
    <template v-for="option in options" :key="option.type">
      <span
        v-if="option.type === 'edit'"
        v-action="actions.edit"
        class="i-custom-edit svg-icon"
        @click.stop="handleEdit"
      ></span>
      <span
        v-else-if="option.type === 'edit-page'"
        v-action="actions.edit"
        class="i-custom-edit svg-icon"
        @click.stop="handleEditPage"
      ></span>
      <span
        v-else-if="option.type === 'show'"
        v-action="actions.show"
        class="i-custom-show svg-icon"
        @click.stop="handleShow"
      ></span>
      <span
        v-else-if="option.type === 'force-destroy'"
        v-action="actions.forceDel"
        class="i-custom-delete-force svg-icon destroy"
        @click.stop="handleForceDestroy"
      ></span>
      <span
        v-else-if="option.type === 'restore'"
        v-action="actions.restore"
        class="i-custom-restore svg-icon restore"
        @click.stop="handleRestore"
      ></span>
      <span
        v-else-if="option.type === 'destroy'"
        v-action="actions.del"
        class="i-custom-delete svg-icon destroy"
        @click.stop="handleDestroy"
      ></span>
      <span
        v-else-if="option.type === 'download'"
        v-action="actions.download"
        class="i-custom-download svg-icon"
        @click.stop="handleDownload"
      ></span>
      <template v-else>
        <slot :name="`option_${option.type}`" :option="option">
          #option_{{ option.type }}={ option }
        </slot>
      </template>
    </template>
  </el-space>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'Options',
  })

  const props = defineProps<OptionProps>()

  const emits = defineEmits<{
    (e: 'on-show', id: number | string): void
    (e: 'on-edit-page', id: number | string): void
    (e: 'on-edit', id: number | string, index: number): void
    (e: 'on-restore', id: number | string): void
    (e: 'on-del', id: number | string): void
    (e: 'on-force-del', id: number | string): void
    (e: 'on-download', id: number | string): void
  }>()

  export interface OptionProps {
    actions: object
    id: number | string
    index: number
    options: object
  }

  const handleShow = () => {
    emits('on-show', props.id)
  }
  const handleEdit = () => {
    emits('on-edit', props.id, props.index)
  }
  const handleEditPage = () => {
    emits('on-edit-page', props.id)
  }
  const handleRestore = () => {
    emits('on-restore', props.id)
  }
  const handleDestroy = () => {
    emits('on-del', props.id)
  }
  const handleForceDestroy = () => {
    emits('on-force-del', props.id)
  }
  const handleDownload = () => {
    emits('on-download', props.id)
  }
</script>

<style lang="scss" scoped>
  .list-col-options {
    @apply pt-5px color-color-place;

    .svg-icon {
      @apply wh-14px cursor-pointer;

      &:hover {
        @apply color-primary;
      }
    }

    .restore {
      color: #f4d19f;

      &:hover {
        @apply color-warning;
      }
    }

    .destroy {
      &:hover {
        @apply color-danger;
      }
    }
  }
</style>
